<template>
  <div class="more-cinemaDetail">
    <div class="header">
      <van-nav-bar :title="cinemaName" left-arrow @click-left="back">
      </van-nav-bar>
    </div>

    <div class="group">
      <van-cell-group>
        <van-cell class="cinema-name" :title="cinemaName" />
        <van-cell class="cinema-position" :title="position" is-link />

        <van-icon
          class="position-icon"
          name="location-o"
          color="#3b9fe6"
          size="20"
        />

        <van-cell class="cinema-phone" :title="tel" />
        <van-icon class="phone-icon" name="phone-o" color="#3b9fe6" size="20" />
      </van-cell-group>
    </div>

    <div class="service">
      <div class="title">特色服务</div>
      <div class="item" v-for="(item,index) in service" :key="index">
        <div>
          <span class="icon" :style="[{color:item.color},{borderColor:item.color}]">{{item.tag}}</span>
          <span class="txt">{{item.desc}}</span>
        </div>
        
      </div>
      <!-- <div class="item">
        <span class="icon">标签</span>
        <span class="txt">未取票用户</span>
      </div>
      <div class="item">
        <span class="icon">标签</span>
        <span class="txt">未取票用户</span>
      </div> -->
    </div>

    <div class="notice" v-if="notice">
      <div class="title">影院公告</div>
      <p>
        {{notice}}
      </p>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "MoreCinemaDetail",
  data() {
    return {
      cinemaName: "",
      position: "",
      tel: "",
      service:'',
      notice:''
    };
  },
  computed: {
    // ...mapState(['cinemaId'])
  },
  created() {
    this.getData();
  },

  methods: {
    back() {
      this.$router.go(-1);
    },
    getData() {
      // 
      // 
      this.axios({
        methods: "get",
        url: "cinema/detail",
        query: {
          cinemaId: 16832,
        },
      })
        .then((result) => {
          

          let cinemaData = result.data.data;
          

          this.cinemaName = cinemaData.nm;
          this.position = cinemaData.addr;
          this.tel = cinemaData.tel;

          this.service = cinemaData.featureTags;
          // 

          this.notice = cinemaData.notice;
          
          
        })
        .catch((err) => {
          
        });
    },
  },
};
</script>

<style lang="less" scoped>
.more-cinemaDetail {
  margin-top: 46px;
  height: 620px;
  background-color: #f5f5f5;
}
.header {
  width: 100%;
  height: 46px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  background-color: #dd403b;
  /deep/ .van-nav-bar {
    background-color: #dd403b;
  }
  /deep/ .van-hairline--bottom::after {
    content: "";
    width: 0;
    height: 0;
    border-bottom: none;
  }
  /deep/ .van-nav-bar__arrow {
    font-size: 22px;
    color: #fff;
    font-weight: bold;
  }
  /deep/ .van-nav-bar__title {
    color: #fff;
    font-size: 19px;
  }
  /deep/ .van-icon-star {
    margin-right: 10px;
  }
}
.cinema-name {
  font-size: 16px;
  color: #333;
  font-weight: bolder;
}
.cinema-position {
  font-size: 14px;
  color: #333;
  padding-left: 36px;
}
.cinema-phone {
  font-size: 14px;
  color: #3b9fe6;
  padding-left: 36px;
}

.position-icon {
  //  border: 1px solid #000;
  position: absolute;
  left: 10px;
  top: 58px;
}
.phone-icon {
  // border: 1px solid #000;
  position: absolute;
  left: 11px;
  top: 102px;
}
.group {
  position: relative;
  .van-cell {
    border-bottom: 1px solid #ddd;
  }
}

.service {
  margin-top: 16px;
  background-color: #fff;
  padding: 12px;
  .title {
    font-size: 16px;
    color: #666;
    font-weight: bolder;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
  }
  .item{
    font-size: 14px;
    color: #777;
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ddd;
    display: flex;
    &:last-child{
      padding-bottom: 0px;
    border-bottom:none;
    }
    .txt{
      // border: 1px solid #000;
      margin-left: 6px;
      line-height: 26px;
    }
    .icon{
      border: 1px solid #000;
      padding: 2px 4px;
      border-radius: 4px;
    }
  }
}
.notice {
  background-color: #fff;
  margin-top: 16px;
  padding: 12px;
  .title {
    font-size: 16px;
    color: #666;
    font-weight: bolder;
  }
  p {
    font-size: 14px;
    color: #777;
  }
}
</style>